<template>
  <!-- <li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave"> -->
  <li :class="classes">
    <div :class="[prefixCls + '-submenu-title']" ref="reference" @click.stop="handleClick">
      <slot name="title"></slot>
      <Icon
        :type="arrowType"
        :custom="customArrowType"
        :size="arrowSize"
        :class="[prefixCls + '-submenu-title-icon']"
      />
    </div>
    <transition name="slide-up">
      <ul :class="[prefixCls+'-sub', {[`${prefixCls}-third`]: hasParentSubmenu}]">
        <slot></slot>
      </ul>
    </transition>
  </li>
</template>
<script>
import { getStyle, findComponentUpward, findComponentsDownward } from '@/utils/assist'
import Emitter from './emitter'
// import mixin from "./mixin"
import submenuMixin from './submenu-mixin'
const prefixCls = 'ivu-menu'

export default {
  name: 'submenu',
  mixins: [Emitter, submenuMixin],
  components: {},
  props: {
    name: {
      type: [String, Number],
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      prefixCls: prefixCls,
      active: false,
      opened: false,
      showUl: false,
      dropWidth: parseFloat(getStyle(this.$el, 'width'))
    }
  },
  computed: {
    classes () {
      return [
        `${prefixCls}-isubmenu`,
        {
          [`${prefixCls}-item-active`]: this.active && !this.hasParentSubmenu,
          [`${prefixCls}-opened`]: this.opened,
          [`${prefixCls}-submenu-disabled`]: this.disabled,
          [`${prefixCls}-submenu-has-parent-submenu`]: this.hasParentSubmenu,
          [`${prefixCls}-child-item-active`]: this.active
        }
      ]
    },
    accordion () {
      return this.menu.accordion
    },
    // dropStyle () {
    //     let style = {};

    //     if (this.dropWidth) style.minWidth = `${this.dropWidth}px`;
    //     return style;
    // },
    titleStyle () {
      return {}
    },
    // 3.4.0, global setting customArrow 有值时，arrow 赋值空
    arrowType () {
      let type = 'ios-arrow-down'

      if (this.$IVIEW) {
        if (this.$IVIEW.menu.customArrow) {
          type = ''
        } else if (this.$IVIEW.menu.arrow) {
          type = this.$IVIEW.menu.arrow
        }
      }
      return type
    },
    // 3.4.0, global setting
    customArrowType () {
      let type = ''

      if (this.$IVIEW) {
        if (this.$IVIEW.menu.customArrow) {
          type = this.$IVIEW.menu.customArrow
        }
      }
      return type
    },
    // 3.4.0, global setting
    arrowSize () {
      let size = ''

      if (this.$IVIEW) {
        if (this.$IVIEW.menu.arrowSize) {
          size = this.$IVIEW.menu.arrowSize
        }
      }
      return size
    }
  },
  methods: {
    handleMouseenter () {
      if (this.disabled) return
      // if (this.mode === 'vertical') return;
      // console.log('opened: ', this.opened);
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.menu.updateOpenKeys(this.name)
        this.opened = true
        this.showUl = true
      }, 250)
    },
    handleMouseleave () {
      if (this.disabled) return
      // if (this.mode === 'vertical') return;

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.menu.updateOpenKeys(this.name)
        this.opened = false
        this.showUl = false
      }, 150)
    },
    handleClick () {
      if (this.disabled) return
      // if (this.mode === 'horizontal') return;
      // const opened = this.opened;
      // const showUl = this.showUl;
      // if (this.accordion) {
      //   this.$parent.$children.forEach(item => {
      //     if (item.$options.name === 'submenu') item.opened = false;
      //   });
      // }
      // this.opened = !opened;
      // this.showUl = !showUl;
      this.menu.updateOpenKeys(this.name)
    }
  },
  watch: {
    // mode(val) {
    // if (val === 'horizontal') {
    //     this.$refs.drop.update();
    // }
    // },
    opened (val) {
      // if (this.mode === 'vertical') return;
      if (val) {
        // set drop a width to fixed when menu has fixed position
        this.dropWidth = parseFloat(getStyle(this.$el, 'width'))
        // this.$refs.drop.update();
      } else {
        // this.$refs.drop.destroy();
      }
    }
  },
  mounted () {
    this.$on('on-menu-item-select', name => {
      // if (this.mode === 'horizontal') this.opened = false;
      this.dispatch('Imenu', 'on-menu-item-select', name)
      return true
    })
    this.$on('on-update-active-name', status => {
      if (findComponentUpward(this, 'submenu')) {
        this.dispatch('submenu', 'on-update-active-name', status)
      }
      if (findComponentsDownward(this, 'submenu')) {
        findComponentsDownward(this, 'submenu').forEach(item => {
          item.active = false
        })
      }
      this.active = status
    })
  }
}
</script>
<style lang="less">
.ivu-menu-sub {
  // position: fixed;
  // top: 64px;
  // left: 200px;
  // bottom: 0;
  width: 200px;
  overflow: auto;
  &.ivu-menu-third {
    left: 400px;
    right: 0;
    background: #fbcc82;
    width: auto;
  }
}
// .ivu-menu-isubmenu {
//   height: 44px;
//   line-height: 44px;
//   color: #f5f5f5;
// }
// .ivu-menu-opened, .ivu-menu-item-active {
//   height: auto;
// }
.ivu-menu-submenu-title-icon {
  float: right;
  position: relative;
  top: 13px;
}
</style>
